<!DOCTYPE html>
<html lang="zh-cn" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8" />
<title>DeathGhost-产品分类列表</title>
<meta name="keywords" content="DeathGhost,DeathGhost.cn,web前端设,移动WebApp开发" />
<meta name="description" content="DeathGhost.cn::H5 WEB前端设计开发!" />
<meta name="author" content="DeathGhost"/>
<link href="/style/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/js/public.js"></script>
<script type="text/javascript" src="/js/jquery.js"></script>
   <script type="text/javascript" src="/js/jqpublic.js"></script>
    <script src="/js/vue.js"></script>
    <script src="/js/axios.min.js"></script>

<!--
Author: DeathGhost
Author URI: http://www.deathghost.cn
-->
</head>
<body>
<header class="header">


</header>
<script>

 $('.header').load('/header.html',function(responseTxt,statusTxt,xhr){
  console.log('responseTxt,statusTxt,xhr')

 })

</script>
<div id="app">
<!--Start content-->
<section class="Psection">
 <section class="fslist_navtree">
     <ul class="select">
         <li class="select-list" >
             <dl id="select1">
                 <dt>分类：</dt>
                 <dd class="select-all selected"><a href="javascript:" @click="getDishCategoryDefault()">全部</a></dd>
                 <dd v-for="dishCategory in dishCategories"><a href="javascript:" @click="getByCategory(dishCategory.id)">{{dishCategory.dishCategoryName}}</a></dd>
             </dl>
         </li>
         <li class="select-list">
             <dl id="select2">
                 <dt>位置：</dt>
                 <dd class="select-all selected"><a href="javascript:" @click="getDefaultRegion()">全部</a></dd>
                 <dd v-for="region in regions"><a href="javascript:" @click="getByRegion(region.id)">{{region.region}}</a></dd>
             </dl>
         </li>

         <li class="select-list">
             <dl id="select3">
                 <dt>价位区间：</dt>
                 <dd class="select-all selected"><a href="javascript:" @click="getDefaultPrice()">全部</a></dd>
                 <dd><a href="javascript:" @click="getByPrice(20,0)">20元以下</a></dd>
                 <dd><a href="javascript:" @click="getByPrice(20,40)">20-40元</a></dd>
                 <dd><a href="javascript:" @click="getByPrice(0,40)">40元以上</a></dd>
             </dl>
         </li>
         <li class="select-result">
             <dl>
                 <dd class="select-no">已选择：</dd>
             </dl>
         </li>
     </ul>
 </section>
 <section class="CateL Overflow">
  <ul>
   <li v-for="dish in page.records">
   <a :href="'/dish/details/'+dish.id" target="_blank" :title="dish.dishName">
   <img :src="'http://192.168.6.186:8081/'+dish.picture">
   <p class="Overflow" >{{dish.dishName}}</p>
   <p class="Overflow" text="'现价：￥'+${dish.price}">现价：￥{{dish.price}}</p>
   <p class="price02">原价：￥<s>{{dish.marketPrice}}</s></p>
   <p class="Overflow">商铺名：{{dish.shopName}}</p>
   <p class="Overflow">商铺地址：{{dish.address}}</p>
   </a>
   </li>
  </ul>
     <div class="TurnPage" id="t1">
         <a href="javascript:">
             <span v-if="page.current != 1" class="Prev" @click="firstPage()"><i></i>首页</span>
         </a>
         <a v-if="page.current != 1" href="javascript:"><span class="PNumber" @click="lastPage()">上一页</span></a>
         <a v-for="p in page.pages" href="javascript:;" >
             <span v-if="p == page.current" class="PNumber"><font color="#dc143c">{{p}}</font></span>
             <span v-if="p != page.current" class="PNumber" @click="goPage(p)">{{p}}</span>
         </a>
         <a v-if="page.current != page.pages && page.total != 0" href="javascript:"><span class="PNumber" @click="nextPage()">下一页</span></a>
         <a href="javascript:">
             <span v-if="page.current != page.pages && page.total != 0" class="Next" @click="endPage()">尾页<i></i></span>
         </a>
     </div>
 </section>
 <aside class="CateR">
 <!--广告位或推荐位-->
  <div>
   <a target="_blank"><img src="/upload/ad.jpg"></a>
  </div>
  <div class="Hot_shop">
   <span class="Hshoptile Font14 FontW Block">热门商家</span>
   <ul>
    <li>
     <a  target="_blank" title="好味来快餐连锁店"><img src="/upload/cc.jpg"></a>
     <p class="Font14 FontW Overflow Lineheight35"><a  target="_blank" title="好味来快餐连锁店">好味来快餐连锁店</a></p>
     <p class="Lineheight35 Overflow"><span title="通过动态控制地址的字符数量...">地址：西安市莲湖区土门新市场斜对面...</span></p>
    </li>
    <li>
     <a  target="_blank" title="好味来快餐连锁店"><img src="/upload/dd.jpg"></a>
     <p class="Font14 FontW Overflow Lineheight35"><a  target="_blank" title="好味来快餐连锁店">好味来快餐连锁店</a></p>
     <p class="Lineheight35 Overflow"><span title="通过动态控制地址的字符数量...">地址：西安市莲湖区土门新市场斜对面...</span></p>
    </li>
    <li>
     <a  target="_blank" title="好味来快餐连锁店"><img src="/upload/ee.jpg"></a>
     <p class="Font14 FontW Overflow Lineheight35"><a target="_blank" title="好味来快餐连锁店">好味来快餐连锁店</a></p>
     <p class="Lineheight35 Overflow"><span title="通过动态控制地址的字符数量...">地址：西安市莲湖区土门新市场斜对面...</span></p>
    </li>
    <li>
     <a  target="_blank" title="好味来快餐连锁店"><img src="/upload/cc.jpg"></a>
     <p class="Font14 FontW Overflow Lineheight35"><a  target="_blank" title="好味来快餐连锁店">好味来快餐连锁店</a></p>
     <p class="Lineheight35 Overflow"><span title="通过动态控制地址的字符数量...">地址：西安市莲湖区土门新市场斜对面...</span></p>
    </li>
   </ul>
  </div>
 </aside>
</section>

<footer>
 <section class="Otherlink">
  <aside>
   <div class="ewm-left">
    <p>手机扫描二维码：</p>
    <img src="/images/Android_ico_d.gif">
    <img src="/images/iphone_ico_d.gif">
   </div>
   <div class="tips">
    <p>客服热线</p>
    <p><i>1830927**73</i></p>
    <p>配送时间</p>
    <p><time>09：00</time>~<time>22:00</time></p>
    <p>网站公告</p>
   </div>
  </aside>
  <section>
    <div>
    <span><i class="i1"></i>配送支付</span>
    <ul>
     <li><a th:href="article_read.html" target="_blank" title="标题">支付方式</a></li>
     <li><a th:href="article_read.html" target="_blank" title="标题">配送方式</a></li>
     <li><a th:href="article_read.html" target="_blank" title="标题">配送效率</a></li>
     <li><a th:href="article_read.html" target="_blank" title="标题">服务费用</a></li>
    </ul>
    </div>
    <div>
    <span><i class="i2"></i>关于我们</span>
    <ul>
     <li><a th:href="article_read.html" target="_blank" title="标题">招贤纳士</a></li>
     <li><a th:href="article_read.html" target="_blank" title="标题">网站介绍</a></li>
     <li><a th:href="article_read.html" target="_blank" title="标题">配送效率</a></li>
     <li><a th:href="article_read.html" target="_blank" title="标题">商家加盟</a></li>
    </ul>
    </div>
    <div>
    <span><i class="i3"></i>帮助中心</span>
    <ul>
     <li><a th:href="article_read.html" target="_blank" title="标题">服务内容</a></li>
     <li><a th:href="article_read.html" target="_blank" title="标题">服务介绍</a></li>
     <li><a th:href="article_read.html" target="_blank" title="标题">常见问题</a></li>
     <li><a th:href="article_read.html" target="_blank" title="标题">网站地图</a></li>
    </ul>
    </div>
  </section>
 </section>
<div class="copyright">© 版权所有 2016 DeathGhost 技术支持：<a href="http://www.deathghost.cn" title="DeathGhost">DeathGhost</a></div>
</footer>
</div>
</body>
<script>
    new Vue({
        el: "#app",
        data(){
            return {
                dishCategories:[],
                regions:[],
                page:[],
                //当前页码
                current: 0,
                //菜品类别id
                cid: 0,
                //菜品所属店铺地区id
                rid: 0,
                //价格区间较小价格
                minPrice: 0,
                //价格区间较大价格
                maxPrice: 0
            }
        },
        methods:{
            //跳转首页
            firstPage() {
                this.current = 1;
                this.getList();
            },
            //上一页
            lastPage(){
                this.current = this.page.current - 1;
                this.getList();
            },
            goPage(p){
                this.current = p;
                this.getList();
            },
            nextPage(){
                this.current = this.page.current + 1;
                this.getList();
            },
            //尾页
            endPage(){
                this.current = this.page.pages;
                this.getList();
            },
            //根据菜品类别id查询
            getByCategory(c){
                this.cid = c;
                this.current = 1;
                this.getList();
            },
            //去除菜品分类条件
            getDishCategoryDefault(){
                this.cid = 0;
                this.current = 1;
                this.getList();
            },
            //根据地域行政区id查询菜品
            getByRegion(rid) {
                this.rid = rid;
                this.current = 1;
                this.getList();
            },
            //去除地区分类条件
            getDefaultRegion(){
                this.rid = 0;
                this.current = 1;
                this.getList();
            },
            //根据价格查询菜品
            getByPrice(minPrice,maxPrice){
              this.minPrice = minPrice;
              this.maxPrice = maxPrice;
              this.current = 1;
              this.getList();
            },
            //去除价格条件
            getDefaultPrice(){
                this.minPrice = 0;
                this.maxPrice = 0;
                this.getList();
            },
            getList(){
                axios.get("/dish/dishList?current="+this.current+"&cid="+this.cid+"&rid="+this.rid+"&minPrice="+this.minPrice+"&maxPrice="+this.maxPrice).then(r => {
                    if(r.data.code === 200){
                        this.page = r.data.data[2];
                    }
                })
            }
        },
        mounted(){
            axios.get("/dish/dishList?current="+this.current+"&cid="+this.cid+"&rid="+this.rid+"&minPrice="+this.minPrice+"&maxPrice="+this.maxPrice).then(r => {
                if(r.data.code === 200){
                    this.dishCategories = r.data.data[0];
                    this.regions = r.data.data[1];
                    this.page = r.data.data[2];
                }
            })
        }
    });
</script>
</html>
